<script>
import {DocumentAdd ,DeleteFilled}from  "@element-plus/icons-vue"

import {healthylist,delhealthy} from '@/api/healthy'
import { ElMessage } from 'element-plus'

export default{
    data() {
        return {
            cxl: {
        value2: "",
        region: "",
        cascader: [],
        search: "",
      },

      healthy:[]

        }
    },
    mounted() {
        healthylist().then(res =>{
            console.log(res)
            this.healthy=res
        })
    },
    components:{
        DocumentAdd ,
        DeleteFilled
    },
    methods: {
        cz(){
           this.cxl = {
            value2: "",
            region: "",
            cascader: [],
            search: "",
      }
        },

        //删除数据
        del(row){
            delhealthy(row).then(res=>{
                if(res.code ==200){
                    ElMessage.success('删除成功')
                }
            healthylist().then(res =>{
            console.log(res)
            this.healthy=res
        })
            })
        },
        addlist(){
            this.$router.push('/healthy/healthyshow')
        }

    },
}
</script>
<template>
   
    <div>
        带药提醒发送
        <el-tabs type="border-card">
        
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="grid-content" />
                选择日期:
                <el-date-picker
                  v-model="cxl.value2"
                  type="daterange"
                  start-placeholder="Start Date"
                  end-placeholder="End Date"
                  :default-value="[new Date(), new Date()]"
              /></el-col>
              <el-col :span="4" :push="2"
                ><div class="grid-content" />
                年级班级
                <el-form-item label="">
                  <el-select v-model="cxl.region" placeholder="请选择">
                    <el-option label="一年级一班" value="1" />
                    <el-option label="一年级二班" value="2" />
                    <el-option label="二年级一班" value="3" />
                    <el-option label="二年级二班" value="4" />
                    <el-option label="三年级一班" value="5" />
                    <el-option label="三年级二班" value="6" />
                  </el-select> </el-form-item
              ></el-col>
            
              <el-col :span="4" :push="2"
                ><div class="grid-content" />
               学生姓名:
                <el-input
                  v-model="cxl.search"
                  class="w-50 m-2"
                  placeholder="请输入"
                  :suffix-icon="cxl.search"
                />
              </el-col>

              <el-col :span="4" :push="7"
                ><div class="grid-content ep-bg-purple" />
                <el-button  type="primary">查询</el-button>
                <el-button @click="cz" type="info">重置</el-button>
              </el-col>
            </el-row>
        </el-tabs>
        <div class="box">
            <el-button @click="addlist" class="fs" type="primary">
              <el-icon><DocumentAdd /></el-icon>
               发送提醒</el-button
            >
        <el-table  :data="healthy" border style="width: 100%">
    <el-table-column align="center"  type="index" label="序号" width="80" />
    <el-table-column align="center" prop="Type" label="学生姓名" width="90" />
    <el-table-column align="center" prop="aheader" label="年级班级" width="100" />
    <el-table-column  prop="range" label="带药提醒" width="350" >
        <template #default="scope">
                <div class="tz" style="color: peru; text-decoration: underline" @click="$router.push('/healthy/healthytxt')">
                    {{ scope.row.range }}
                </div>
                </template>
    </el-table-column>
    <el-table-column align="center" prop="day" label="用药日期" width="110" />
    <el-table-column align="center" prop="nUploader" label="发送者" width="100" >
        <template #default="scope">
            <div >
                <div v-if="scope.row.Type === '张天天'">张天天妈妈</div>
                <div v-else-if="scope.row.Type === '刘星'">刘星爸爸</div>
                <div v-else>小雨姐姐</div>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" prop="ddtime" label="发送时间" width="180" />
    <el-table-column align="center" prop="jsr" label="接收人" width="100" />
    <el-table-column align="center" label="操作" width="60" >
        <template #default="scope">
                  <el-icon class="del" @click="del(scope.row)"
                    ><DeleteFilled
                  /></el-icon>
                </template>
    </el-table-column>
    
  </el-table>
        </div>
           
    </div>
</template>
<style lang="scss" scoped>
.ep-bg-purple{
    margin-top: 18px;
}
.fs{
    float: right;
    margin-bottom: 30px;
    margin-top: 20px;
    margin-right: 5px;
}
.box{
    height: 500px;
    background-color: white;
    margin-top: 20px;
    padding: 10px 15px 10px 15px ;
}
.del {
    width: 30px;
    height: 30px;
    background-color: rgb(248, 67, 86);
    border-radius: 7px;
  }
  .tz{
    cursor: pointer;
  }
</style>